回想一開始的印象

還記得最一開始看到 React 時，最直接的感覺就是：「怎麼很多東西都直接寫進 JavaScript 裡？」
Vue 中熟悉的 v-for、v-if 和 @click 都不見了，畫面與 JavaScript 邏輯也一起出現在 JSX 中。當時也想說只要找到彼此用途相近的寫法，應該就能慢慢適應 React。
但實際接觸後發現真正需要花時間去理解的，比較多是 React 如何安排 Component、State、Props 與資料流。

React 讓我重新接觸 JavaScript

React 很多時候不會另外提供特定的 Template 指令，而是直接使用 JavaScript 原本就有的功能。
在學習 React 的過程中，也重新遇到了 map()、filter()、條件判斷、函式與展開運算子。以前可能只知道它們怎麼寫，放進實際專案後，才更清楚它們能用來處理什麼問題。學習 React 的同時，其實也可以說是一直在重新熟悉 JavaScript。

開始注意資料放在哪裡

比起語法，我覺得在資料應該放在哪個 Component，以及要怎麼傳遞與更新這些部分，是我花比較多時間理解的部分。
過去分開認識 State、Props 與事件處理時會覺得它們各自是一個觀念，但實際順著收藏清單的 items 走過一次，才慢慢看懂它們其實一直互相配合。State 負責保存資料，Props 將資料與函式往下傳，內層 Component 發生操作後，再呼叫上層提供的函式更新 State。
Component 要怎麼拆也沒有固定答案，不是拆得越細越好，也不是全部放在同一個檔案就比較簡單，還是要根據每一部分負責的內容慢慢判斷。

TypeScript 不只是多寫型別

另外在看到 TypeScript 時，只覺得程式碼多了很多冒號、尖括號與型別名稱，看起來比 JavaScript 更複雜。
繼續接觸並逐漸習慣後，才發現這些型別其實是在描述資料應該長什麼樣子，也能在開發時提醒少了哪些內容，或是哪裡使用了不符合預期的資料。
不過 TypeScript 也不是寫上型別就能保證一切正確。像是從 localStorage 讀取的內容，仍然需要在程式執行時實際確認格式。
型別可以協助檢查，但最後還是要自己理解資料從哪裡來，以及可能會出現哪些問題。

AI 寫完後，還是要自己看懂

進入 AI 協作階段後，專案很快就有了可以操作的第一版，但自己看懂的速度當然沒有 AI 產生程式碼那麼快。
還是要慢慢確認每個 Component 負責什麼、資料怎麼流動，以及陌生的寫法到底有什麼用途。當自己對專案越來越了解後，詢問 AI 的方式也開始變得比較明確，不再只是叫它「幫我改好」。
AI 可以協助產生與修改程式碼，但是否符合需求、修改範圍是否合理，以及結果是不是真的沒有問題，仍然需要我們自己閱讀與判斷。

小小總結一下感受(?

從 Vue/JavaScript 到 React/TypeScript，最先注意到的是語法不同，但真正需要時間適應的，反而是 Component、資料流與型別帶來的思考方式。
當然現在肯定不能說自己已經摸熟 React 與 TypeScript，也還有不少內容需要繼續練習。但和一開始相比，至少現在看到一個 React + TypeScript 專案時，算是比較能夠知道可以從哪裡開始閱讀，也能試著順著資料找出程式碼在做什麼。
從一開始覺得什麼都很陌生，到現在可以慢慢嘗試看懂 AI 產生與修改的內容，算是這段時間個人覺得比較明顯的差異。